<template>

  <el-row>
    <el-col :span="10">
      <el-descriptions title="Redis Info"  border>
        <el-descriptions-item
            label="RedisVersion"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px">
          {{redisInfo.redis_version}}
        </el-descriptions-item>

        <el-descriptions-item label="gccVersion" label-align="right" align="center">
          {{redisInfo.gcc_version}}
        </el-descriptions-item>

        <el-descriptions-item label="os" label-align="right" align="center">
          {{redisInfo.os}}
        </el-descriptions-item>

        <el-descriptions-item label="arch" label-align="right" align="center" :span="12">
        {{ redisInfo.arch_bits }}
        </el-descriptions-item>
        <el-descriptions-item label="keys" label-align="right" align="center" :span="12">
          {{ redisInfo.keys }}
        </el-descriptions-item>


        <el-descriptions-item label="uri" label-align="right" align="center">
          <el-tag size="small">localhost:{{redisInfo.tcp_port}}</el-tag>
          <el-tag size="small">localhost:{{redisInfo.tcp_port}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <RedisNodeHot/>
    </el-col>
    <el-col :span="14">
      <GaugeRedis/>
    </el-col>


  </el-row>


</template>

<script>
import GaugeRedis from "../../components/DataShow/GaugeRedis.vue";
import RedisNodeHot from "../../components/DataShow/RedisNodeHot.vue";

export default {
  name: "RedisMonitor",
  components:{
    GaugeRedis,
    RedisNodeHot,
  },
  data() {
    return {
      redisInfo:{
        redis_version:"7.0.11"
        ,os:"windows"
        ,arch_bits:"64"
        ,gcc_version:"10.2.1"
        ,tcp_port:"6379"
        ,keys:1
        ,used_memory_dataset_perc:0.06
      }
    }
  },
}
</script>

<style scoped>

</style>